<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	margin: 0 auto;
	font-size:12px;
}
.search-container {
  width: 800px;
  margin: 0 auto;
  
}

.search-box {
  width: 500px;
  padding: 10px;
  height:60px; 
  padding: 10px;
  border: 1px solid #ccc; 
  box-sizing: border-box;
  font-size:20px;
}

.search-button {
  width: 200px;
  padding: 10px;
  height:60px;
  margin-left:20px;
  background-color: #4CAF50;
  color: white;
  border: none; 
  cursor: pointer; 
  margin-top:2px;
  font-size:20px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
</head>
<body style="background: url('icon/b.png');background-size: cover; ">

	
	<div style=" width: 100%;margin: 0 auto; height:80px;color: white;">
		  <img class="app-item-img" src="icon/home.png" style="pointer-events: none; background-color: #0c6dfe;width:300px;height:100px;margin: 20px;">
	   
	</div>
	
	<div style=" width: 50%;margin: 0 auto; height:150px; color: white;">
		    <div style="width: 50%;margin: 0 auto;text-align:center;line-height: 100px;font-size:100px;"  id="div1"></div>
		    <div style="width: 50%;margin: 0 auto;text-align:center;line-height: 30px;font-size:20px;"  id="div2"></div>
	
	</div>
	<div style=" width: 100%;margin: 0 auto; height:70px;">
	
		<div class="search-container">
		  <input type="text" id="search-box" class="search-box" placeholder="请输入搜索 百度一下"><button class="search-button" id="search-button">搜索</button>
		</div>
	</div>
	<div style=" width: 80%;margin: 0 auto; height:200px;color: white;text-align: center;font-weight: bold;"> 
	
	     
	   <div style="width:100%;height:40px;font-size:20px;text-align: left;justify-content: center; height: 40px;">Website</div> 
	   
	   
		<div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/1.svg">
			Barcode 2.0
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/7.svg">
			OA
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/11.svg">
			Training
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/12.webp">
			Ticket
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/13.svg">
			Baidu
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/14.svg">
			BI 
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/9.webp">
			Tooling
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/16.svg">
			CFM56 Manual
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/17.svg">
			Leap Manual
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/18.svg">
			Office 365
		</div>
		<div style="width:100%;height:40px;font-size:20px;float:left;text-align: left;">
			Quick Click
		</div> 
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/19.svg">
			Control Tower
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/2.svg">
			SMS Report
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/3.webp">
			EHS Report
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/4.svg">
			CIPC Report
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/5.svg">
			Share Folder 
		</div>
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/6.svg">
			Quality Documents
		</div>
		 
		 <div style="height:150px;width:100px;float:left;font-size:14px;margin-left: 40px;">
			<img style="width:100px;height:100px;background:#0c6dfe; color:white;" src="icon/add.svg">
			Barcode 2.0
		</div>
		 
	
	</div>
	
</body>
<script type="text/javascript">
(function(){
	
		$("#search-button").click(function(){  
			window.location.href ="https://www.baidu.com/s?wd="+$("#search-box").val(); 
		});
	
		setInterval(() => {
			
		  const now = new Date();
		  const hours = now.getHours().toString().padStart(2, '0');
		  const minutes = now.getMinutes().toString().padStart(2, '0');
		  var date = new Date();
		    date.setDate(date.getDate()); 
		    var year = date.getFullYear();
		    var month = date.getMonth()+1;
		    var day = date.getDate();
		    var dayOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][date.getDay()];

		    console.log("前一年：" + (year - 1));
		    console.log("前一月：" + (month - 1));
		    console.log("前一日：" + day);
		    console.log("星期：" + dayOfWeek);
		  
		  $('#div1').html( hours+":"+minutes+"");
		  $('#div2').html( year+"年"+month+"月"+day+"日 "+dayOfWeek);
		  
		}, 1000); 

		function load(){
			
			$("img").each(function(){
			    $(this).css("background",getRandomColor());  
			  });
		}
		
		function getRandomColor() {
			  var letters = '0123456789ABCDEF';
			  var color = '#';
			  for (var i = 0; i < 6; i++) {
			    color += letters[Math.floor(Math.random() * 16)];
			  }
			  return color;
			}
		load();
		
		
})()


</script>
</html>